<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
      <el-breadcrumb-item>供应商产品管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写供应商产品信息"></el-step>
      <el-step title="配置定价规则"></el-step>
    </el-steps>

    <!-- 卡片视图区域 -->
    <el-card>
      <div slot="header">
        <span v-show="!active">新增供应商产品</span>
        <span v-show="active">配置定价规则</span>
      </div>
      <!-- 供应商产品信息表单 -->
      <ProductBaseInfoAdd
        v-show="!active"
        ref="baseInfoRef"
        @showProductFormData="getProductFormData"
      ></ProductBaseInfoAdd>

      <el-row v-show="!active">
        <el-button @click="$router.push('/supplier/product')">
          取 消
        </el-button>
        <el-button class="theme-background-color" @click="nextStep"
          >下一步</el-button
        >
      </el-row>

      <!-- 定价规则表单 -->
      <PriceRuleAdd
        v-show="active"
        ref="priceRuleRef"
        @showPriceRuleData="getPriceRuleData"
      ></PriceRuleAdd>

      <el-row v-show="active">
        <el-button @click="active = 0">上一步</el-button>
        <el-button class="theme-background-color" @click="saveAllData">
          保存
        </el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import ProductBaseInfoAdd from './ProductBaseInfoAdd.vue'
import PriceRuleAdd from './PriceRuleAdd.vue'

export default {
  components: {
    ProductBaseInfoAdd,
    PriceRuleAdd
  },
  data() {
    return {
      active: 0,
      productForm: {},
      // 定价规则
      priceRuleForm: {},
      diffData: []
    }
  },
  methods: {
    getProductFormData(data) {
      this.productForm = data
    },
    nextStep() {
      console.log(this.productForm)
      const flag = this.$refs.baseInfoRef.validateForm()
      if (!flag) return
      this.active = 1
    },
    getPriceRuleData(data) {
      this.priceRuleForm = data
    },
    async saveAllData() {
      const flag = this.$refs.priceRuleRef.validateForm()
      if (!flag) return
      this.$refs.priceRuleRef.validPriceRuleData()

      console.log(this.priceRuleForm)
      if (
        this.priceRuleForm.is_diff &&
        this.priceRuleForm.type == 1 &&
        this.priceRuleForm.diff.length === 0
      ) {
        return this.$message.error('请配置差异价规则')
      }
      // console.log(this.priceRuleForm)
      // console.log(this.diffData)

      if (this.productForm.area_limit_way == '0') {
        this.productForm.area_limit = '000000'
      }
      var postData = Object.assign(this.productForm, {
        rule: this.priceRuleForm
      })
      console.log(postData)
      // 向后端发起请求
      const { data: res } = await this.$http.post(
        '/admin/provider_product/add',
        postData
      )
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.$router.push('/supplier/product')
    }
  }
}
</script>

<style lang="less" scoped>
</style>
